<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="/jsp/common/common.jsp" %>
<script src="<%=basePath%>/static/js/highcharts.js"></script>
<script src="<%=basePath%>/static/js/highcharts-3d.js"></script>
<script src="<%=basePath%>/static/js/highcharts-more.js"></script>
<script src="<%=basePath%>/static/js/solid-gauge.js"></script>
</head>
<body>

	<div class="top-div"><em></em><span>&nbsp;>&nbsp;系统健康状况</span></div>
	
	<div class="panel-block" style="height: 230px;width: 61.5%;">
		<h2>堆内存区使用情况</h2>
		<div id="eden" style="width: 33%;height: 200px;float: left;"></div>
		<div id="survivor" style="width: 33%;height: 200px;float: left;"></div>
		<div id="old" style="width: 33%;height: 200px;float: left;"></div>
	</div>
	
	<div class="panel-block" style="height: 230px;width: 35%;">
		<table style="width: 99%;height: 100%;">
			<tr>
				<td style="color: white;background-color: #45B6B0;padding-left: 20px;font-size: 20px;">
					FGC次数:&nbsp;<span id="fullGCConutspan">0</span>&nbsp;&nbsp;
					平均耗时: <span id="fullGCTimeSpan">0</span>ms
				</td>
			</tr>
			<tr>
				<td style="color: white;background-color: #FFA200;padding-left: 20px;font-size: 20px;">
					YGC次数:&nbsp;<span id="youngGCConutSpan">0</span>&nbsp;&nbsp;
					平均耗时: <span id="youngGCTimeSpan">0</span>ms
				</td>
			</tr>
		</table>
	</div>
	
	<div class="panel-block" style="width: 19%" name="southDiv">
		<div id="threadPoolBasicBarDiv"></div>
	</div>
	
	<div class="panel-block" style="width: 77.5%" name="southDiv">
		<div id="memoryUseageDiv"></div>
	</div>
<script type="text/javascript">

var splineObject;

$(document).ready(function(){

 	var bodyHt = document.documentElement.clientHeight;
	$('body').find('div[name="southDiv"]').height(bodyHt - 310);
	
	initMemoryUseageDiv();
	initThreadPoolBasicBar();
	
	initSolidgauge($('#eden'),'Eden');
	initSolidgauge($('#survivor'),'Survivor');
	initSolidgauge($('#old'),'OldMemory');

});

function st(){
	setInterval("getData()",1500);
}

function getData(){
	
 	var url = '<%=basePath%>/webframework/dashboard/getSplineData.do';
	$.ajax({  
        url:url,  
        type:'post',  
        dataType:'json',  
        success:function(data,textStatus,jqXHR){  
        	
        	 //折线图
             var serie0 = splineObject.series[1];
             var serie1 = splineObject.series[0];
             serie0.addPoint([data.nowTime, data.heapMemoryUsageUsed], true, true);
             serie1.addPoint([data.nowTime, data.heapMemoryUsageMax], true, true);
             
             //内存回收
             $(data.gcInfoList).each(function(index,entry){
            	 if(entry.Name === 'PS Scavenge'){
            		 $('#youngGCConutSpan').html(entry.CollectionCount);
            		 $('#youngGCTimeSpan').html(entry.averageTime);
            	 }else if(entry.Name === 'PS MarkSweep'){
            		 $('#fullGCConutspan').html(entry.CollectionCount);
            		 $('#fullGCTimeSpan').html(entry.averageTime);
            	 }
             });
             
             //内存池
             $(data.memoryList).each(function(index,entry){
           	    var chart = $('#'+entry.poolName).highcharts();
           		if (chart) {
           		    var point = chart.series[0].points[0];
           		    var usePercent = entry.usePercent;
           		    point.update(parseInt(usePercent.split('.')[0]));
           		}
             });
             
             var threadPoolChart = $('#threadPoolBasicBarDiv').highcharts();
             var point = threadPoolChart.series[0].points[0];
             point.update(parseInt(data.threadNumberMap.totalNumber));
             
             var point1 = threadPoolChart.series[1].points[0];
             if(data.threadNumberMap.RUNNABLE){
            	 point1.update(parseInt(data.threadNumberMap.RUNNABLE));
             }
             
             
        },  
        error:function(XMLHttpRequest,textStatus,errorThrown){  
        }                     
    });
}

function initMemoryUseageDiv(){
	
	var divHeight =  $('#memoryUseageDiv').height();
	divHeight = parseFloat (divHeight) -20;
	
	splineObject = new Highcharts.Chart({
        chart: {
        	renderTo : 'memoryUseageDiv',
            type: 'area',
            marginRight: 10,
            height : divHeight,
            events: {
                load: st
            }
        },
        title: {
            text: '堆内存占用情况'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 100
        },
        yAxis: {
            title: {
                text: 'MB'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                   this.y+" MB";
            }
        },
        legend: {
            enabled: false
        },
        credits:{
        	enabled: false
        },
        exporting: {
            enabled: false
        },
        plotOptions: {
            area: {
                stacking: 'normal',
                lineColor: '#666666',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#666666'
                }
            }
        },
        series: [
					{
						name: '最大堆内存',
						color:'#53b5e6',
					    data: (function () {
					        var data = [];
					        var time = (new Date()).getTime();
					       
					
					        for (i = -19; i <= 0; i += 1) {
					            data.push({
					                x: time + i * 1000,
					                y: 10
					            });
					        }
					        return data;
					    }())
					},
			         {
			            name: '已使用堆内存',
			            color:'#55BF3B',
			            data: (function () {
			                var data = [];
			                var time = (new Date()).getTime();
			
			                for (i = -19; i <= 0; i += 1) {
			                    data.push({
			                        x: time + i * 1000,
			                        y: 10
			                    });
			                }
			                return data;
			            }())
			        }
        
        ]
    });
	
}

function initSolidgauge(targetObj,name){
	var gaugeOptions = {

	        chart: {
	            type: 'solidgauge'
	        },

	        title: null,

	        pane: {
	            center: ['50%', '85%'],
	            size: '140%',
	            startAngle: -90,
	            endAngle: 90,
	            background: {
	                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
	                innerRadius: '60%',
	                outerRadius: '100%',
	                shape: 'arc'
	            }
	        },

	        tooltip: {
	            enabled: false
	        },
	        credits:{
	        	enabled: false
	        },
	        // the value axis
	        yAxis: {
	            stops: [
	                [0.1, '#55BF3B'], // green
	                [0.5, '#DDDF0D'], // yellow
	                [0.9, '#DF5353'] // red
	            ],
	            lineWidth: 0,
	            minorTickInterval: null,
	            tickPixelInterval: 400,
	            tickWidth: 0,
	            title: {
	                y: -70
	            },
	            labels: {
	                y: 16
	            }
	        },

	        plotOptions: {
	            solidgauge: {
	                dataLabels: {
	                    y: 5,
	                    borderWidth: 0,
	                    useHTML: true
	                }
	            }
	        }
	    };
	
    // The speed gauge
    $(targetObj).highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
            min: 0,
            max: 100,
            title: {
                text: ''
            }
        },

        credits: {
            enabled: false
        },

        series: [{
            name: 'Speed',
            data: [1],
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}%</span><br/>' +
                       '<span style="font-size:14px;">'+name+'</span></div>'
            }
        }]

    }));
}

function initThreadPoolBasicBar(){
	
	var divHeight =  $('#threadPoolBasicBarDiv').height();
	divHeight = parseFloat (divHeight) -20;
	
	$('#threadPoolBasicBarDiv').highcharts({
        chart: {
            type: 'column',
            height : divHeight
        },
        title: {
            text: '线程数统计'
        },
        xAxis: {
            categories: [
                '线程数',
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },
        tooltip: {
            headerFormat: '<table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y}个</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        legend: {
            enabled: false
        },
        credits:{
        	enabled: false
        },
        exporting: {
            enabled: false
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'total',
            data: [0]

        }, {
            name: 'active',
            data: [0]

        }]
    });

	
	
}

</script>
</body>
</html>